import { ExtractPropTypes, PropType } from 'vue'
import { TuniaoSize, TuniaoSizes, TuniaoType, TuniaoTypes } from '../../types/tuniao-ui'
import { validatorColorValue, validatorSizeValue } from '../../utils'

/**
 * tab数据类型
 */
export type TabData = {
  /** 标题 */
  title: string,
  /** 显示角标 */
  badge?: boolean,
  /** 角标背景颜色 */
  badgeBgColor?: string,
  /** 角标内容 */
  badgeContent?: string | number,
  /** 显示点角标 */
  dotBadge?: boolean
}

/**
 * props参数
 */
export const tabsProps = {
  /** tab数据 */
  data: {
    type: Array as PropType<TabData[]>,
    default: () => {
      return []
    }
  },
  /** 当前选择的tab索引, 从0开始计算 */
  current: {
    type: [String, Number],
    default: 0
  },
  /** 高度, 默认为80, 单位为rpx */
  height: {
    type: [String, Number],
    default: 80,
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 背景颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  bgColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('bg', value)
    }
  },
  /** 字体颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  color: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 选中时颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  activeColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 选中时滑块的颜色, 当tab为true时有效 */
  barColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('bg', value)
    }
  },
  /** 颜色类型，如果自定义了颜色则使用颜色的值 */
  type: {
    type: String,
    default: '',
    validator: (value: TuniaoType | '') => {
      return value === '' || TuniaoTypes.includes(value)
    }
  },
  /** 设置阴影 */
  shadow: {
    type: Boolean,
    default: false
  },
  /** 阴影颜色 */
  shadowColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('shadow', value)
    }
  },
  /** 字体大小, 默认单位为rpx */
  fontSize: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 是否允许滑动 */
  scroll: {
    type: Boolean,
    default: true
  },
  /** 显示滑块 */
  bar: {
    type: Boolean,
    default: true
  },
  /** 距离顶部的偏移距离, 单位rpx */
  top: {
    type: [String, Number],
    default: 0
  },
  /** 过渡动画时长, 单位ms */
  duration: {
    type: [String, Number],
    default: 300
  },
  /** 自定义样式 */
  customStyle: {
    type: Object,
    default: () => {
      return {}
    }
  },
  /** 自定义item样式 */
  itemStyle: {
    type: Object,
    default: () => {
      return {}
    }
  },
  /** 激活item的样式 */
  activeItemStyle: {
    type: Object,
    default: () => {
      return {}
    }
  },
  /** 底部滑块样式 */
  barStyle: {
    type: Object,
    default: () => {
      return {}
    }
  }
}
export type TabsProps = ExtractPropTypes<typeof tabsProps>

export const tabsEmits = {
  /** tab修改事件 */
  change: (index: string | number) => typeof index === 'string' || typeof index === 'number'
}
export type TabsEmits = typeof tabsEmits
